<template>
     <div class="eltag">
         <el-tag v-html="text"
                 :type="type"></el-tag>
         <div v-if="title.length>0"
              class="tooltip"
              :style="'width:'+titleWidth+'px'">
             <p>{{title}}</p>
             <div class="arrow"></div>
         </div>
     </div>
 </template>

<script>
export default {
  props: {
    value: [String, Number, Boolean],
    html: String,
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    titleWidth: {
      type: Number,
      default: 300
    },
    convertValue: {
      type: Function,
      default () {
        return null
      }
    },
    placeholder: {
      type: String,
      default: '无'
    }
  },
  computed: {
    myValue () {
      let value =  Object.prototype.toString.call(this.value) !== '[object Undefined]' ? this.value.toString() : (this.html || '')

      if (Object.prototype.toString.call(this.convertValue) === '[object Function]') {
        let convertResult = this.convertValue(value)

        if (Object.prototype.toString.call(convertResult) === '[object String]') {
          value = convertResult
        }
      }

      return value === '' ? this.placeholder : value
    },
    text () {
      let tAry = this.myValue.split(/[\n]/g)
      return `<p>${tAry.join('</p><p>')}</p>`
    }
  }
}
</script>

<style scoped>

</style>

<style>
    .el-tag>p {
        margin: 0 !important;
    }
</style>
